import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "login",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/Login.vue"),
    },
    {
      path: "/home",
      name: "home",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/Home.vue"),
      children: [
        {
          path: "/home/",
          name: "homeView",
          component: () => import("../views/HomeView.vue"),
        },
        {
          path: "/home/match",
          name: "match",
          component: () => import("../views/Match.vue"),
          children: [
            {
              path: "/home/match/art",
              name: "matchArt",
              // route level code-splitting
              // this generates a separate chunk (About.[hash].js) for this route
              // which is lazy-loaded when the route is visited.
              component: () => import("../views/MatchArt.vue"),
            },
            {
              path: "/home/match/",
              name: "matchStudy",
              // route level code-splitting
              // this generates a separate chunk (About.[hash].js) for this route
              // which is lazy-loaded when the route is visited.
              component: () => import("../views/MatchStudy.vue"),
            },
          ],
        },

        {
          path: "/home/certificate",
          name: "certificate",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Certificate.vue"),
          children: [
            {
              path: "/home/certificate/",
              name: "certificateStudy",
              // route level code-splitting
              // this generates a separate chunk (About.[hash].js) for this route
              // which is lazy-loaded when the route is visited.
              component: () => import("../views/CertificateStudy.vue"),
            },
            {
              path: "/home/certificate/art",
              name: "certificateArt",
              // route level code-splitting
              // this generates a separate chunk (About.[hash].js) for this route
              // which is lazy-loaded when the route is visited.
              component: () => import("../views/CertificateArt.vue"),
            },
            {
              path: "/home/certificate/volunteer",
              name: "certificateVolunteer",
              // route level code-splitting
              // this generates a separate chunk (About.[hash].js) for this route
              // which is lazy-loaded when the route is visited.
              component: () =>
                import("../views/certificateVolunteer.vue"),
            },
          ],
        },
        {
          path: "/home/bonus",
          name: "bonus",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Bonus.vue"),
        },
        {
          path: "/home/practice",
          name: "practice",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Practice.vue"),
        },
        {
          path: "/home/project",
          name: "project",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Project.vue"),
        },
        {
          path: "/home/person",
          name: "person",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Person.vue"),
        },
        {
          path: "/home/paper",
          name: "paper",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Paper.vue"),
        },

        {
          path: "/home/add",
          name: "add",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Add.vue"),
        },
        {
          path: "/home/add",
          name: "add",
          // route level code-splitting
          // this generates a separate chunk (About.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import("../views/Add.vue"),
        },
      ],
    },
    {
      path: "/test1",
      name: "test1",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import("../views/Test.vue"),
    },
  ],
});

export default router;
